<template>
    <div id="details-of-travel-declaration">
        <Title title="出行审批"/>
        <el-form ref="form" :model="form" label-width="90px">
            <el-form-item label="学校名称" class="label-title">
                <div style="width: 350px">
                    <el-input v-model="form.name"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="出行名称" class="label-title">
                <div style="width: 350px">
                    <el-input v-model="form.name"></el-input>
                </div>
            </el-form-item>
            <el-form-item label="出行人员"  class="label-title">
                <div v-for="(v,i) in peopleList" :key="v">
                    <input v-model="peopleList[i].a" class="travelPersonnel" placeholder="年级"/>
                    <input v-model="peopleList[i].b" class="travelPersonnel" placeholder="班级"/>
                    <input v-model="peopleList[i].c" class="travelPersonnel" placeholder="人数"/>
                    <input v-model="peopleList[i].d" class="travelPersonnel" placeholder="管理老师"/>
                    <input v-model="peopleList[i].e" class="travelPersonnel" placeholder="联系方式"/>

                </div>
                <i class="el-icon-document-add" @click="addList()" style="font-size: 20px"></i>
                <i class="el-icon-document-remove" @click="remove()" style="font-size: 20px" v-show="showSwitch"></i>
            </el-form-item>
            <el-form-item label="出行日期" class="label-title">
                <span class="timeTitle">出发时间</span>
                <div class="time" style="margin-bottom: 25px">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                </div >
                <div class="time">
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </div>
                <br>
                <span class="timeTitle">返回时间</span>
                <div class="time">
                    <el-col :span="11">
                        <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
                    </el-col>
                </div >
                <div class="time">
                    <el-col :span="11">
                        <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
                    </el-col>
                </div>
            </el-form-item>
            <el-form-item label="出行目的地" class="label-title">
                <div v-for="(v,i) in destinationList" :key="v" class="destination" style="margin-bottom: 10px">
                    <span class="timeTitle">目的地{{i + 1}}</span>
                    <el-select v-model="destinationList[i].a" placeholder="请选择" class="select-item">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="destinationList[i].b" placeholder="请选择" class="select-item">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="destinationList[i].c" placeholder="请选择" class="select-item">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <i class="el-icon-document-add" @click="addDestinationList()" style="font-size: 20px"></i>
                <i class="el-icon-document-remove" @click="removeDestinationList()" style="font-size: 20px" v-show="showDestination"></i>
            </el-form-item>
            <el-form-item label="带队老师" class="label-title">
                <input class="travelPersonnel" placeholder="姓名"/>
                <input class="travelPersonnel" placeholder="性别"/>
                <input class="travelPersonnel" placeholder="职务"/>
                <input class="travelPersonnel" placeholder="联系方式"/>
            </el-form-item>
            <el-form-item label="车辆安排" class="label-title">
                <div v-for="(v,i) in vehicleList" :key="v" class="car">
                    <span class="timeTitle">出行车辆{{i + 1}}</span>
                    <input v-model="vehicleList[i].a"  class="travelPersonnel" placeholder="跟车老师"/>
                    <input v-model="vehicleList[i].b" class="travelPersonnel" placeholder="联系方式"/>
                    <input v-model="vehicleList[i].c" class="travelPersonnel" placeholder="车牌号码"/>
                    <input v-model="vehicleList[i].d" class="travelPersonnel" placeholder="定位设备编号"/>
                    <input v-model="vehicleList[i].e" class="travelPersonnel" placeholder="预设线路"/>
                </div>
                <i class="el-icon-document-add" @click="addVehicle()" style="font-size: 20px"></i>
                <i class="el-icon-document-remove" @click="removeVehicle()" style="font-size: 20px" v-show="showVehicle"></i>
            </el-form-item>
            <el-form-item label="出行介绍" prop="brief" class="label-title">
                <el-input
                        type="textarea"
                        :rows="8"
                        placeholder="请输入内容"
                        style="width: 550px">
                </el-input>
            </el-form-item>
            <el-form-item label="审核单位" class="label-title">
                <el-select v-model="value" placeholder="请选择" class="select-item">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="onSubmit" style="width: 220px;margin-left: 120px">提交审核</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    import Title from "@/components/title/Title";
    import {Button, Form, FormItem, Input,DatePicker,TimePicker,Select} from "element-ui";

    export default {
        name: "DetailsOfTravelDeclaration",
        components: {
            Title,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-input": Input,
            "el-button": Button,
            "el-date-picker":DatePicker,
            "el-time-picker":TimePicker,
            "el-select":Select,
        },
        data(){
            return {
                peopleList:[
                    {a:'',b:'',c:'',d:'',e:''}
                ],
                destinationList:[
                    {a:'',b:'',c:''}
                ],
                vehicleList:[
                    {a:'',b:'',c:'',d:'',e:''}
                ],
                showSwitch:false,
                showDestination:false,
                showVehicle:false,
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                }
            }
        },
        methods:{
            onSubmit() {
                console.log('提交审核');
            },
            addList(){
                let listNum = this.peopleList.length;
                console.info(listNum);
                if(listNum >= 1){
                    this.showSwitch = true;
                }
                this.peopleList.push({a:'',b:'',c:'',d:'',e:''})

            },
            remove(){
                let listNum = this.peopleList.length;
                if(listNum >=1){
                    this.peopleList.pop();
                    if(listNum == 2){
                        this.showSwitch = false;
                    }
                }
            },
            addDestinationList(){
                let listNum = this.destinationList.length;
                console.info(listNum);
                if(listNum >= 1){
                    this.showDestination = true;
                }
                this.destinationList.push({a:'',b:'',c:''})
            },
            removeDestinationList(){
                let listNum = this.destinationList.length;
                if(listNum >=1){
                    this.destinationList.pop();
                    if(listNum == 2){
                        this.showDestination = false;
                    }
                }
            },
            addVehicle(){
                let listNum = this.vehicleList.length;
                console.info(listNum);
                if(listNum >= 1){
                    this.showVehicle = true;
                }
                this.vehicleList.push({a:'',b:'',c:'',d:'',e:''})
            },
            removeVehicle(){
                let listNum = this.vehicleList.length;
                if(listNum >=1){
                    this.vehicleList.pop();
                    if(listNum == 2){
                        this.showVehicle = false;
                    }
                }
            }
        }
    }
</script>

<style scoped>
    .label-title{
        font-weight: bold;
    }
    .travelPersonnel{
        width: 100px;
        height: 32px;
        border: 1px solid lightgray;
        border-radius: 2px;
        margin-right: 15px;
        font-size: 13px;
        padding-left: 4px;
    }
    .time{
        width: 150px;
        display: inline-block;
        margin-right: 15px;
        height: 32px;
    }
    .timeTitle{
        font-weight: lighter;
        margin-right: 40px;
        color: #919191;
    }
    .destination{
    }
    .select-item{
        display: inline-block;
        width: 100px;
        margin-right: 10px;
    }
</style>
